<template>
    <div>
        <Tables 
          :title ='title' 
          :field = "type=='1'?field:field1" 
          :butns ="butns" 
          :tableData ='tableData' 
          :animateShow = "animate_show"
          :dbClickDisabled = "true"
          :perNum='per_num' 
          :totalNum="total_num"  
          :curPage ="cur_page"
          :pageSize='pageSize' 
          :rankable ="true"
          @rankData = "rankData"
          @changePageSize = 'changePageSize'
          @loadData ="getData"  
          @clearEvent="clearModal" 
          >
		   <div slot="filter">
				<search :searchFiled="searchFiled" @searchEvent = "searchData"></search>
				<div style="margin: 10px 0 0 20px;">
					<button :class="[type=='1'?'btn-active':'btn-unactive']" class="button button--aylen"  @click="changeType('1')">封堵日志</button>
					<button :class="[type=='0'?'btn-active':'btn-unactive']" class="button button--aylen" @click="changeType('0')">解封日志</button>
				</div>
			</div>
		</Tables>
        <Modals 
        :id ="'modal'" 
        :title ="'提示'" 
        :status = "status" 
        :errorMsg="errorMsg" 
         @sentErrorMsg = "getErrorMsg" 
         @modalEvent ="clearAll">
            <div slot ="modal_content">
                <p style="font-size:16px;">确定清除所有{{type=='1'?'封堵':'解封'}}日志？</p>
            </div>
        </Modals>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
	import search from 'components/common/search'
    import Modals from 'components/common/Modals'
    import logManageService from 'services/logManageService' 
    import PageData from 'libs/PageData'
    let butns = [
        {
            type:'other',
            name:'清空',
            event:'clearEvent',
            icon:'/static/img/w_clear.png'
        }
    ]
    let field = [
        {
            type:'rank',
        },
        {
            type:'text',
            label:'MAC地址/IP地址',
            name:'mac',          
        },
		{
            type:'text',
            label:'备注',
            name:'description', 
            editable:true,
            regex:/^[\w\u4e00-\u9fa5]{0,16}$/         
        },
		{
            type:'text',
            label:'管理员',
            name:'username',          
        },
		{
            type:'text',
            label:'封堵时间',
            name:'time',          
        }   
    ]
	let field1 = [
        {
            type:'rank',
        },
        {
            type:'text',
            label:'MAC地址/IP地址',
            name:'mac',          
        },
		{
            type:'text',
            label:'备注',
            name:'description', 
            editable:true,
            regex:/^[\w\u4e00-\u9fa5]{0,16}$/         
        },
		{
            type:'text',
            label:'管理员',
            name:'user',          
        },
		{
            type:'text',
            label:'解封时间',
            name:'time',          
        }   
    ]
	let searchFiled =[
		 {
            type:'text',
            label:'IP|MAC',
            name:'source',
            regex: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){0,3}(2[0-4]\d|25[0-5]|[01]?\d\d?)?$|^([0-9A-Fa-f]{2}:){1,6}$/,
        },
        {
            type:'time-rang',
            label:'时间范围',
            name:['start_time','end_time'],
        }

	]
    export default {
		components:{
		    Tables,
            Modals,
			search
	    },
        data() {
            return{
                title:'封堵&解封',
                type:'1',
                field:field,
				field1:field1,
                butns:butns,
                tableData:[],
                per_num:25,
                total_num:1,
                cur_page:1,
                pageSize:[10, 20, 40, 80],       
				searchFiled:searchFiled,
				animate_show:false,
                finddata:{},
                errorMsg:'',
                status:"",
                size:10,
                order:'',
                by:'',
                params:{}
            }
        },
        created() {
            this.getData()
        },
        methods:{
            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            clearModal() {
                this.status =''
                this.errorMsg = ''
				$("#modal").modal('show')
			},
            clearAll() {
				this.status = 'ing'
				logManageService.clearUnblockLog(this.type)
				.then((res) => {
					
					if (res.errcode === 0) {
						this.status = 'ok'
						let params ={
							page:1,
						}
						this.loadData(params)
					} else {
						this.status = 'error'
						this.errorMsg = res.errorMessage
					}
				})
			},
			loadBolck(status) {
				this.type = status
				let params ={
					page:1
				}
				this.loadData(params)
            },
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.getData()
            }, 
            rankData(param){
                this.order = param.order
                this.by =  param.by
                this.getData()
            },
            searchData(searchData){
                this.animate_show = true
                this.params = searchData
				this.getData()
            },
            changeType(type){
                this.type = type
                this.order = ''
                this.by=''
                this.cur_page= 1
                this.params={}
                this.getData()
            },
            getData() {		
                this.order = this.order=='mac'?'source':this.order

                logManageService.getUnblockLog(this.order,this.by,this.cur_page,this.size,this.type,this.params)
                .then((res) => {				
					if (res.errcode === 0) {
						this.animate_show = false
                        this.tableData = res['8'].logs.map((item)=>{
                            item.mac = item.source
                            return item
                        })
                        this.total_num = res['8'].count
                    }
				})
            }
        }
    }
</script>
<style scoped>
	.button {
		height: 20px;
		margin-right: 10px;
	}
</style>